<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 考试 </el-breadcrumb-item>
                <el-breadcrumb-item>新建试题</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <div class="form-box">
                <el-form ref="form">
                    <br />
                    <el-container style="width: 90%; text-align: center">
                        <el-header style="text-align: right">
                            <el-dropdown @command="getText">
                                <span class="el-dropdown-link">类型 <i class="el-icon-arrow-down el-icon--right"></i> </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item v-for="item in dropdownData" :key="item.id" :command="item">
                                        {{ item.categoryname }}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <el-input placeholder="类型" class="handle-input mr10" style="width: 100px" v-model="category_name" readonly=""></el-input>
                        </el-header>
                        <el-container :model="title1">
                            <el-aside style="width: 400px">
                                <el-form-item>
                                    <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 11, maxRows: 12 }"
                                        placeholder="请输入题目:"
                                        v-model="title1.title"
                                    >
                                    </el-input>
                                </el-form-item>
                            </el-aside>
                            <el-aside style="background-color: #e9eef3; width: 150px; text-align: right">
                                <el-container :model="title1.answer" style="display: block">
                                    <div style="margin: 50px 0"></div>
                                    <div>
                                        <el-checkbox v-model="answerA" label="A" border></el-checkbox>
                                    </div>
                                    <div style="margin: 10px 0"></div>
                                    <div>
                                        <el-checkbox v-model="answerB" label="B" border></el-checkbox>
                                    </div>
                                    <div style="margin: 10px 0"></div>
                                    <div>
                                        <el-checkbox v-model="answerC" label="C" border></el-checkbox>
                                    </div>
                                    <div style="margin: 10px 0"></div>
                                    <div>
                                        <el-checkbox v-model="answerD" label="D" border></el-checkbox>
                                    </div>
                                </el-container>
                            </el-aside>
                            <el-main style="display: block; text-align: left">
                                <el-switch v-model="title1.type" active-text="多选" inactive-text="单选"> </el-switch>
                                <div style="margin: 10px 0"></div>
                                <div>
                                    <el-input
                                        style="width: 400px"
                                        type="textarea"
                                        :autosize="{ minRows: 1, maxRows: 2 }"
                                        placeholder="请输入答案:"
                                        v-model="title1.optionA"
                                    >
                                    </el-input>
                                </div>
                                <div style="margin: 10px 0"></div>
                                <div>
                                    <el-input
                                        style="width: 400px"
                                        type="textarea"
                                        :autosize="{ minRows: 1, maxRows: 2 }"
                                        placeholder="请输入答案:"
                                        v-model="title1.optionB"
                                    >
                                    </el-input>
                                </div>
                                <div style="margin: 10px 0"></div>
                                <div>
                                    <el-input
                                        style="width: 400px"
                                        type="textarea"
                                        :autosize="{ minRows: 1, maxRows: 2 }"
                                        placeholder="请输入答案:"
                                        v-model="title1.optionC"
                                    >
                                    </el-input>
                                </div>
                                <div style="margin: 10px 0"></div>
                                <div>
                                    <el-input
                                        style="width: 400px"
                                        type="textarea"
                                        :autosize="{ minRows: 1, maxRows: 2 }"
                                        placeholder="请输入答案:"
                                        v-model="title1.optionD"
                                    >
                                    </el-input>
                                </div>
                            </el-main>
                        </el-container>
                    </el-container>
                    <br />
                    <el-form-item style="text-align: center">
                        <el-button type="primary" @click="onSubmit">表单提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'create_title',
    data() {
        return {
            category_name: '',
            answerA: '',
            answerB: '',
            answerC: '',
            answerD: '',
            form: {},
            dropdownData: [],

            title1: {
                answer: '',
                optionA: '',
                optionB: '',
                optionC: '',
                optionD: '',
                type: false,
                categoryid: '',
                title: ''
            }
        };
    },
    created() {
        // this.getId();
        this.getData();
    },

    methods: {
        getText(command) {
            this.category_name = command.categoryname;
            this.title1.categoryid = command.id;
        },
        getData() {
            //渲染下拉框
            this.$axios
                .post('/api/category/findCategory/', {})
                .then((res) => {
                    this.dropdownData = res.data.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        //提交表单
        onSubmit() {
            this.title1.answer = '';
            console.log(this.title1.type);
            if (this.answerA == true) {
                this.title1.answer = this.title1.answer + 'A';
            }
            if (this.answerB == true) {
                this.title1.answer = this.title1.answer + 'B';
            }
            if (this.answerC == true) {
                this.title1.answer = this.title1.answer + 'C';
            }
            if (this.answerD == true) {
                this.title1.answer = this.title1.answer + 'D';
            }
            if (this.title1.type == 'flase') {
                this.title1.type = '单选';
            }
            if (this.title1.type == 'true') {
                this.title1.type = '多选';
            }
            if (
                (this.title1.title != null) &
                (this.title1.answer != null) &
                (this.title1.optionA != null) &
                (this.title1.optionB != null) &
                (this.title1.optionC != null) &
                (this.title1.optionD != null) &
                (this.title1.type != null) &
                (this.title1.categoryid != null)
            ) {
                this.$axios
                    .post('/api/title/addTitle/', this.title1)
                    .then((res) => {
                        console.log(this.title1.categoryid);
                    })
                    .catch();
                this.$message.success('添加成功！');
            } else {
                this.$message.warning('输入不能为空！');
            }
        }
    }
};
</script>



<style>
.el-header,
.el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 50px;
}

.el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: right;
    width: 50px;
    /* line-height: 200px; */
}

.el-aside {
    background-color: #e9eef3;
    color: #333;
    /* text-align: center; */
    left: 90%;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    /* text-align: center; */
    display: block;
}
.el-dropdown-link {
    cursor: pointer;
    color: #409eff;
}
.el-icon-arrow-down {
    font-size: 12px;
}

body > .el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
</style>
            
      